<template>
  <div class="category-filter">
    <div class="category-item"  @click="handleOrder">
      <van-space>
        <i class="iconfont" :class="currentOrderFilter.iconName"></i>
        <span>{{currentOrderFilter.orderItem}}</span>
      </van-space>
    </div>
    <div class="category-item" @click="handleCategory">
      <van-space>
        <i class="iconfont icon-icon"></i>
        <span>不限类别</span>
      </van-space>
    </div>
    <div class="category-item" @click="handleChangeCard">
      <van-space>
        <i class="iconfont icon-lianxi2hebing_jilu"></i>
        <span v-text="cardName"></span>
      </van-space>
    </div>
    <operate-box :is-show="useOperatorBoxStore().isShowOverlay" @handle-close="handleClose">
        <category @handleCategoryConfirm="categoryConfirm" v-if="useOperatorBoxStore().showOverlayType==='category'" />
        <order @handleOrderConfirm="orderConfirm" v-else-if="useOperatorBoxStore().showOverlayType==='order'" />
    </operate-box>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from "vue";
import OperateBox from "@/components/operateBox/index.vue"
import category from "@/components/operateBox/category.vue"
import order from "@/components/operateBox/order.vue"
import useArticleFilterStore from "@/stores/modules/articleFilter.js";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";
// 作者：YCH
// 时间：2022年10月30日 17:15:01
const emit = defineEmits(["handleOrderConfirm","handleChangeCard"]);

// 筛选参数
const currentOrderFilter = new reactive({
  iconName: 'icon-chuangjianshijian',
  orderItem: '从新到旧'
})
const cardName =ref("紧凑卡片");

// 分类
const handleCategory = () => {
  useOperatorBoxStore().showOverlay(true,"category")
};

// 排序
const handleOrder = () => {
  // 此时参数应初始化
  useArticleFilterStore().queryParams.orderField = 'createTime';
  useArticleFilterStore().queryParams.orderType = 'ASC';
  useOperatorBoxStore().showOverlay(true,"order")
};

// 详情卡片 紧凑卡片转换
const handleChangeCard = () => {
  // 0紧凑卡片  1详情卡片
  if (cardName.value === '紧凑卡片'){
    cardName.value = '详情卡片';
    emit("handleChangeCard",1);
  }else {
    cardName.value = '紧凑卡片';
    emit("handleChangeCard",0);
  }
};

/**
 * 点击确定触发 排序
 */
const orderConfirm = ()=>{
  emit("handleOrderConfirm");
}
/**
 * 点击确定触发 种类筛选
 */
const categoryConfirm= ()=>{
  emit("handleCategoryConfirm");
}
/**
 *
 * @type {UnwrapRef<{orderType: string, iconName: string, orderField: string}>}
 */
const currentOrders = useArticleFilterStore().currentOrders;
watch(currentOrders, (newValue, oldValue) => {
  // console.log('changed from', oldValue, 'to', newValue);
  currentOrderFilter.iconName = newValue.iconName;
  currentOrderFilter.orderItem = newValue.orderItem;
},{deep:true,immediate:false});


const handleClose = (value) => {
  useOperatorBoxStore().showOverlay(false,"")
}


</script>

<style lang="less" scoped>
.category-filter{
  background-color: var(--van-search-content-background-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30px;
  border-radius: 20px;
  .category-item{
    width: 116px;
    display: flex;
    justify-content: center;
  }
}
</style>
